var ani_layer = null;
var ani_vehicles = new Array();
var ani_stations = new Array();

function ani_updatePos(packet){
	if(packet.type=="station"){
		//do nothing
	}
	else{
		var x, y,id;
		x=packet.params.x;
		y=packet.params.y;	
		id=packet.id;

		var i=0;
		for(i=0;i<ani_vehicles.length;i++){

			if(ani_vehicles[i].getId()==id){
				var v = ani_vehicles[i];
				var x1=packet.params.x;
				var y1=packet.params.y;
				console.log("x: "+x1 + "y: " + y1);

				if(!(typeof v == "undefined" && ani_layer == null)) {
					var anim = new Kinetic.Animation(function(frame) {
						var period=1000;
						var scale = Math.sin(frame.time * 2 * Math.PI / period) + 0.001;
							v.setScale(scale);
							v.setX(x1);
							v.setY(y1);
			  		}, ani_layer);

			  		anim.start();
			  	}
			}
		}
	}
}

if(window.addEventListener) {
	window.addEventListener('load', function () {

		var stage = new Kinetic.Stage({
			container: 'animation_container',
			width: 750,
			height: 450
		});

	  ani_layer = new Kinetic.Layer();
	  var messageLayer = new Kinetic.Layer();
				  
		//CARS
		var imageObj = new Image();
		imageObj.onload = function() {
			var car = new Kinetic.Image({
			  x: 25,
			  y: 25,
			  image: imageObj,
			  draggable:true,
			  offset:[15,15],
			  id:0
			});

			var car1 = new Kinetic.Image({
			  x: 50,
			  y: 50,
			  image: imageObj,
			  draggable:true,
			  offset:[15,15],
			  id:1
			});

			var car2 = new Kinetic.Image({
			  x: 75,
			  y: 75,
			  image: imageObj,
			  draggable:true,
			  offset:[15,15],
			  id:2
			});

			ani_vehicles[0]=car;
			ani_vehicles[1]=car1;
			ani_vehicles[2]=car2;

			// add the shape to the layer
			ani_layer.add(car);
			ani_layer.add(car1);
			ani_layer.add(car2);

			// add the layer to the stage
			stage.add(ani_layer);
		};

		imageObj.src = 'img/ani_reddot.png';
		
		//STATION
	    var station=new Kinetic.Rect({
			        x: 21,
			        y: 200,
			        width: 50,
			        height: 50,
			        fill: 'green',
			        stroke: 'black',
			        strokeWidth: 1,
			        id:0,
		}); 
		
		var station1=new Kinetic.Rect({
			        x: 653,
			        y: 200,
			        width: 50,
			        height: 50,
			        fill: 'green',
			        stroke: 'black',
			        strokeWidth: 1,
			        id:1,
		});

		var station2=new Kinetic.Rect({
			        x: 330,
			        y: 20,
			        width: 50,
			        height: 50,
			        fill: 'green',
			        stroke: 'black',
			        strokeWidth: 1,
			        id:2,
		});

		var station3=new Kinetic.Rect({
			        x: 330,
			        y: 370,
			        width: 50,
			        height: 50,
			        fill: 'green',
			        stroke: 'black',
			        strokeWidth: 1,
			        id:3,
		});
		var station4=new Kinetic.Rect({
			        x: 372,
			        y: 190,
			        width: 50,
			        height: 50,
			        fill: 'green',
			        stroke: 'black',
			        strokeWidth: 1,
			        id:4,
		});

		ani_stations[0] = station;
		ani_stations[1] = station1;
		ani_stations[2] = station2;
		ani_stations[3] = station3;
		ani_stations[4] = station4;

		 var stText = new Kinetic.Text({
		  x: 35,
		  y: 205,
		  fontSize: 36,
		  fontFamily: 'Arial',
		  text: '1',
		  fill: 'black'
		});
		var stText1 = new Kinetic.Text({
		  x: 667,
		  y: 205,
		  fontSize: 36,
		  fontFamily: 'Arial',
		  text: '3',
		  fill: 'black'
		});
		var stText2 = new Kinetic.Text({
		  x: 345,
		  y: 27,
		  fontSize: 36,
		  fontFamily: 'Arial',
		  text: '2',
		  fill: 'black'
		});
		var stText3 = new Kinetic.Text({
		  x: 345,
		  y: 378,
		  fontSize: 36,
		  fontFamily: 'Arial',
		  text: '4',
		  fill: 'black'
		});
		var stText4 = new Kinetic.Text({
		  x: 386,
		  y: 197,
		  fontSize: 36,
		  fontFamily: 'Arial',
		  text: '5',
		  fill: 'black'
		});
		
		ani_layer.add(station).add(stText);
		ani_layer.add(station1).add(stText1);
		ani_layer.add(station2).add(stText2);
		ani_layer.add(station3).add(stText3);
		ani_layer.add(station4).add(stText4);
		stage.add(layer);
	});		
}